<script setup>
import { defineProps, ref, watch, reactive } from 'vue'
import { mainStore } from '../../../store/mainStore'

const store = mainStore()
const props = defineProps({
  deviceId: Number,
})

let frameResult = ref([])

const filterColor = (type) => {
  let color = '#000000'
  const params = store.carTypeColor.find((element) => element.type == type)
  if (params) color = params.color

  return color
}

watch(
  () => store.videoData_Json,
  (newValue, oldValue) => {
    const params = newValue.find((item) => item['deviceId'] == props.deviceId)
    // console.log(params);

    if (!params) return
    frameResult.value = params.list
  },
  { deep: true }
)
const handleClickVideoItem = (e) => {
  console.log(e.target)
}
</script>

<template>
  <div class="videoRet-container">
    <div class="item" v-for="item in frameResult" :key="item.id" :style="{ border: `12px solid ${filterColor(item.label)}`, top: item['left-top-y'] + 'px', left: item['left-top-x'] + 'px', width: item.W + 'px', height: item.H + 'px' }" :data-params="JSON.stringify(item)"></div>
  </div>
</template>

<style lang="less" scoped>
.videoRet-container {
  .item {
    position: absolute;
    z-index: 19;
    box-sizing: border-box;
    cursor: pointer;
  }
}
</style>
